<template>
  <el-card>
    <el-table
        :data="piles"
        border
        style="width: 100%"
        @selection-change="onSelectionChange"
    >
      <el-table-column type="selection" width="50"/>
      <el-table-column
          type="index"
          label="序号"
          width="60"
          :index="(index) => (page - 1) * size + index + 1"
      />
      <el-table-column prop="pileName" label="电桩名称" width="150"/>
      <el-table-column prop="pileCode" label="电桩代码" width="150"/>
      <el-table-column prop="pileType" label="电桩类型" width="100"/>
      <el-table-column prop="pilePower" label="功率 (kW)" width="100"/>
      <el-table-column prop="pileModel" label="型号" width="150"/>
      <el-table-column prop="suitableVehicle" label="适合车型" width="150"/>
      <el-table-column prop="pileStatus" label="状态" width="100">
        <template #default="{ row }">
          <el-tag :type="getTagType(row.pileStatus)">
            {{ row.pileStatus }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="280">
        <template #default="{ row }">
          <el-button size="small" type="primary" @click="$emit('view', row)">查看</el-button>
          <el-button size="small" type="primary" @click="$emit('edit', row)">编辑</el-button>
          <el-button
              size="small"
              :type="getButtonType(row.pileStatus)"
              :disabled="row.pileStatus === '故障中'"
              @click="$emit('toggle', row)"
          >
            {{ getButtonLabel(row.pileStatus) }}
          </el-button>
          <el-button size="small" type="danger" @click="$emit('delete', row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="margin-top: 15px">
      <el-pagination
          :current-page="page"
          :page-size="size"
          :total="total"
          :page-sizes="[5, 10, 15, 20]"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="onPageChange"
          @size-change="onSizeChange"
      ></el-pagination>
    </div>
  </el-card>
</template>

<script>
import {ref, watch} from "vue";

export default {
  name: "ChargingPileTable",
  props: {
    piles: {type: Array, default: () => []},
    page: {type: Number, default: 1},
    size: {type: Number, default: 5},
    total: {type: Number, default: 0},
  },
  emits: [
    "view",
    "edit",
    "toggle",
    "delete",
    "fetch",
    "selection-change",
    "update:page",
    "update:size",
  ],
  setup(props, {emit}) {

    const onSelectionChange = (selection) => {
      emit("selection-change", selection);
    };

    const onPageChange = (newPage) => {
      emit("update:page", newPage);
      emit("fetch");
    };

    const onSizeChange = (newSize) => {
      emit("update:size", newSize);
      emit("fetch");
    };

    // 计算序号
    const calculateIndex = (index) => {
      return (props.page - 1) * props.size + index + 1;
    };

    const getTagType = (status) => {
      switch (status) {
        case '空闲中':
          return 'success';
        case '使用中':
          return 'warning';
        case '故障中':
          return 'danger';
        default:
          return 'info';
      }
    };

    // 新增的方法：根据状态获取按钮类型
    const getButtonType = (status) => {
      if (status === '空闲中') {
        return 'warning'; // 禁用按钮为警告色
      } else if (status === '使用中') {
        return 'success'; // 启用按钮为成功色
      } else if (status === '故障中') {
        return 'danger'; // 故障按钮为危险色
      }
      return 'primary'; // 默认按钮类型
    };

    // 新增的方法：根据状态获取按钮标签
    const getButtonLabel = (status) => {
      if (status === '故障中') {
        return '故障';
      } else if (status === '空闲中') {
        return '占用';
      } else if (status === '使用中') {
        return '释放';
      }
      return '操作';
    };

    return {
      onSelectionChange,
      onPageChange,
      onSizeChange,
      getTagType,
      getButtonType,
      getButtonLabel,
      calculateIndex,
    };
  },
};
</script>

<style scoped>
</style>
